import './index.less';
import { useEffect, useState, useRef } from 'react';
import { Button, Card, Form, message } from 'antd';
import { ProForm, ProFormSelect, ProFormText, ProFormCheckbox } from '@ant-design/pro-components';
import { electricityOptions, wait } from '@/utils';
import { FadeIn } from '@/components/Animation';

const formItemLayout = {
  labelCol: { span: 24 },
  wrapperCol: { span: 24 },
};
export default function ContactUs() {
  const [loading, setLoading] = useState(false);
  const formRef: any = useRef('');
  useEffect(() => {
    initData();
  }, []);

  // 初始化数据
  const initData = () => {
    formRef.current.setFieldsValue({ name: '张三' });
  };

  // 提交
  const submit = async () => {
    let allFormData = formRef?.current?.getFieldFormatValueObject();
    console.log('表单数据: ', allFormData);
    let formatData = await formRef?.current?.validateFieldsReturnFormatValue();
    console.log('格式化后的表单数据: ', formatData);
    setLoading(true);
    await wait(1000);
    setLoading(false);
    message.success('submit successful');
  };

  // 重置
  const reset = () => {
    formRef?.current?.resetFields();
  };

  const size: any = { size: 'large' };
  return (
    <div className="contactUsPage page">
      <div className="w1100 cuCon">
        <div className="txts">
          <div className="tmod">
            <FadeIn>
              <div className="rtit">Contact us</div>
            </FadeIn>
            <FadeIn delay={0.1}>
              <div className="rtxt">Fill out the form to talk to an expert or schedule a demo.</div>
            </FadeIn>
          </div>
          <div className="tmod">
            <FadeIn delay={0.1 * 2}>
              <div className="rtit">Contact information</div>
            </FadeIn>
            <FadeIn delay={0.1 * 3}>
              <div className="rtxt">
                6 Clara St.
                <br />
                Belmont South, NSW 2280
              </div>
            </FadeIn>
          </div>
        </div>
        <FadeIn delay={0.1 * 4}>
          <div className="formwrap">
            <ProForm
              title="新建表单"
              formRef={formRef}
              // layout="horizontal"
              {...formItemLayout}
              submitter={{ render: false }}
            >
              <div className="inlinew flex">
                <div className="col">
                  <ProFormText
                    name="firstName"
                    label="First Name"
                    placeholder="Sam"
                    rules={[{ required: true, message: 'Please complete this required field.' }]}
                    fieldProps={{ ...size }}
                  />
                </div>
                <div className="col">
                  <ProFormText
                    name="lastName"
                    label="Last Name"
                    placeholder="Smith"
                    rules={[{ required: true, message: 'Please complete this required field.' }]}
                    fieldProps={{ ...size }}
                  />
                </div>
              </div>
              <ProFormText
                name="email"
                label="What is your business email?"
                placeholder="samsmith@yourcompany.com"
                rules={[{ required: true, message: 'Please complete this required field.' }]}
                fieldProps={{ ...size }}
              />
              <ProFormCheckbox.Group
                name="describes"
                layout="vertical"
                label="What best describes your company?"
                options={[
                  'Asset Owner / Manager',
                  'Developer',
                  'DSP',
                  'EPC',
                  'O&M Provider',
                  'Other',
                ]}
              />
              <ProFormSelect
                name="dian"
                label="How many solar megawatts (DC) do you own, operate, and/or have under contract?"
                valueEnum={electricityOptions}
                placeholder="Please Select"
                rules={[{ required: true, message: 'Please complete this required field.' }]}
                fieldProps={{ ...size }}
              />
              <ProFormText
                name="hear"
                label="How did you hear about us?"
                placeholder=""
                rules={[{ required: true, message: 'Please complete this required field.' }]}
                fieldProps={{ ...size }}
              />
              <ProFormText
                name="know"
                label="Anything else our solutions consultants should know?"
                placeholder=""
                fieldProps={{ ...size }}
              />
              <Form.Item wrapperCol={{ offset: 0, span: 16 }}>
                {/* <Button onClick={reset}>重置</Button> &nbsp; */}
                <Button type="primary" size="large" onClick={submit} loading={loading}>
                  submit
                </Button>
              </Form.Item>
            </ProForm>
          </div>
        </FadeIn>
      </div>
    </div>
  );
}
